
<div class="row">
  <div class="col-xs-12 col-md-12">
    <div class="widget">
      <div class="widget-header ">
        <span class="widget-caption">用户列表</span>
        <div class="widget-buttons">
          <a href="#" data-toggle="maximize">
            <i class="fa fa-expand"></i>
          </a>
          <a href="#" data-toggle="collapse">
            <i class="fa fa-minus"></i>
          </a>
          <a href="#" data-toggle="dispose">
            <i class="fa fa-times"></i>
          </a>
        </div>
      </div>
      <div class="widget-body">
        <div class="table-toolbar">
          <a  href="user/new" class="btn btn-default">创建用户</a>
        </div>
        <div role="grid" id="editabledatatable_wrapper" class="dataTables_wrapper form-inline no-footer">
          <table class="table table-striped table-hover table-bordered dataTable no-footer" id="editabledatatable" aria-describedby="editabledatatable_info">
            <thead>
            <tr role="row">
              <th rowspan="1" colspan="1" style="min-width: 40px;"></th>
              <th rowspan="1" colspan="1" style="min-width: 80px;">用户名</th>
              <th rowspan="1" colspan="1" style="min-width: 80px;">帐号</th>
              <th rowspan="1" colspan="1" style="min-width: 98px;">邮箱</th>
              <th rowspan="1" colspan="1" style="min-width: 80px;">角色</th>
              <th rowspan="1" colspan="1" style="min-width: 80px;">部门</th>
              <th rowspan="1" colspan="1" style="min-width: 70px;">上次登录</th>
              <th rowspan="1" colspan="1" style="min-width: 70px;"></th>
            </tr>
            </thead>
            <tbody>
            <% users.forEach(function(user){ %>
            <tr>
              <td>
                <i class="fa row-details fa-plus-square-o"></i>
              </td>
              <td>
              <%= user.Name %>
              </td>
              <td>
              <%= user.account %>
              </td>
              <td>
                  <%= user.mail||'' %>
              </td>
              <td>
                  <span><%= (user.role||{}).Name||'' %></span>
              <td>
                <%= (user.depart ||{}).name || '' %>
              </td>
              <td>
                  <%= user.lastlogintime || '' %>
              </td>
              <td>
              <a class="btn btn-info btn-xs edit" href="/user/edit/<%=user.id%>" >修改</a>
              <a class="btn btn-danger btn-xs delete" href="" <% if(user.isSuper){ %>disabled="disabled"<%}%> onclick="funDel('<%=user.id%>');">删除</a>
              </td>
            </tr>
            <% }) %>
            </tbody>
          </table>
          <div class="row DTTTFooter hidden">
            <div class="col-sm-6">
              <div class="dataTables_info" id="editabledatatable_info" role="alert" aria-live="polite" aria-relevant="all">Showing 1 to 5 of 6 entries
              </div>
            </div>
            <div class="col-sm-6">
              <div class="dataTables_paginate paging_bootstrap" id="editabledatatable_paginate">
                <ul class="pagination">
                  <li class="prev disabled"><a href="#">Prev</a></li>
                  <li class="active"><a href="#">1</a></li>
                  <li><a href="#">2</a></li>
                  <li class="next"><a href="#">Next</a></li>
                </ul>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>
<script type="text/javascript">
$().ready(function(){
  var InitiateExpandableDataTable = function () {
    return {
        init: function () {
            /* Formatting function for row details */
            function fnFormatDetails(oTable, nTr) {
                var aData = oTable.fnGetData(nTr);
                var sOut = '<table>';
                sOut += '<tr><td rowspan="5" style="padding:0 10px 0 0;"><img src="assets/img/avatars/' + aData[6] + '"/></td><td>Name:</td><td>' + aData[1] + '</td></tr>';
                sOut += '<tr><td>Family:</td><td>' + aData[2] + '</td></tr>';
                sOut += '<tr><td>Age:</td><td>' + aData[3] + '</td></tr>';
                sOut += '<tr><td>Positon:</td><td>' + aData[4] + '</td></tr>';
                sOut += '<tr><td>Others:</td><td><a href="">Personal WebSite</a></td></tr>';
                sOut += '</table>';
                return sOut;
            }

            /*
             * Insert a 'details' column to the table
             */
            var nCloneTh = document.createElement('th');
            var nCloneTd = document.createElement('td');
            nCloneTd.innerHTML = '<i class="fa fa-plus-square-o row-details"></i>';

            $('#expandabledatatable thead tr').each(function () {
                this.insertBefore(nCloneTh, this.childNodes[0]);
            });

            $('#expandabledatatable tbody tr').each(function () {
                this.insertBefore(nCloneTd.cloneNode(true), this.childNodes[0]);
            });

            /*
             * Initialize DataTables, with no sorting on the 'details' column
             */
            var oTable = $('#expandabledatatable').dataTable({
                "sDom": "Tflt<'row DTTTFooter'<'col-sm-6'i><'col-sm-6'p>>",
                "aoColumnDefs": [
                    { "bSortable": false, "aTargets": [0] },
                    { "bVisible": false, "aTargets": [6] }
                ],
                "aaSorting": [[1, 'asc']],
                "aLengthMenu": [
                   [5, 15, 20, -1],
                   [5, 15, 20, "All"]
                ],
                "iDisplayLength": 5,
                "oTableTools": {
                    "aButtons": [
                "copy",
                "print",
                {
                    "sExtends": "collection",
                    "sButtonText": "Save <i class=\"fa fa-angle-down\"></i>",
                    "aButtons": ["csv", "xls", "pdf"]
                }],
                    "sSwfPath": "assets/swf/copy_csv_xls_pdf.swf"
                },
                "language": {
                    "search": "",
                    "sLengthMenu": "_MENU_",
                    "oPaginate": {
                        "sPrevious": "Prev",
                        "sNext": "Next"
                    }
                }
            });


            $('#expandabledatatable').on('click', ' tbody td .row-details', function () {
                var nTr = $(this).parents('tr')[0];
                if (oTable.fnIsOpen(nTr)) {
                    /* This row is already open - close it */
                    $(this).addClass("fa-plus-square-o").removeClass("fa-minus-square-o");
                    oTable.fnClose(nTr);
                }
                else {
                    /* Open this row */
                    $(this).addClass("fa-minus-square-o").removeClass("fa-plus-square-o");;
                    oTable.fnOpen(nTr, fnFormatDetails(oTable, nTr), 'details');
                }
            });

            $('#expandabledatatable_column_toggler input[type="checkbox"]').change(function () {
                var iCol = parseInt($(this).attr("data-column"));
                var bVis = oTable.fnSettings().aoColumns[iCol].bVisible;
                oTable.fnSetColumnVis(iCol, (bVis ? false : true));
            });

            $('body').on('click', '.dropdown-menu.hold-on-click', function (e) {
                e.stopPropagation();
            })
        }
    };
  }();
  InitiateExpandableDataTable.init();
});
</script>
